<template>
  <div class="markday">
    <!-- 头部 -->
    <header-cmp>
      <template v-slot:txt>
        <p class="title">Memory·轻纪念</p>
      </template>
      <template v-slot:icon>
        <span class="iconfont icon-fenxiang"></span>
      </template>
    </header-cmp>

    <!-- 展示 -->
    <div class="showBox">
      <div class="show_item" v-for="item in itemsArr" :key="item.id">
        <div class="head">{{item.txt}}</div>
        <div class="days">{{item.days}}</div>
        <div class="date">{{item.date}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from "@/https/request";
import HeaderCmp from '@/components/common/HeaderCmp/HeaderCmp.vue'
export default {
  name: 'MarkDay',
  data() {
    return {
      itemsArr: []
    }
  },
  components: {
    HeaderCmp
  },
  methods: {
    getInfo() {
      get('http://192.168.35.43:3005/books/book_items')
        .then(data => {
          this.itemsArr = []
          data.result.forEach(element => {
            if (element.show_Index == 'true') {
              this.itemsArr.push(element)
            }
          });

        })
    }
  },
  created() {
    this.getInfo()
  }
}
</script>

<style lang="scss" scoped>
.markday {
  .header {
    position: fixed;
    width: 100%;
    z-index: 1;
    top: 0;
  }

  .timer {
    background-color: #fff;
    position: fixed;
    top: 80px;
    z-index: 1;
    width: 100%;
  }

  .title {
    color: #fff;
    font-size: 22px;
    margin-left: 10px;
  }

  .iconfont {
    position: relative;
    right: -140px;
  }

  .showBox {
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px 13px;

    .show_item {
      background: rgb(255, 246, 225);
      border-radius: 10px;
      box-shadow: 0 0 5px 2px rgb(170, 170, 170);
      .head {
        font-size: 18px;
        font-weight: 600;
        border-radius: 10px 10px 0 0;
        color: #fff;
        background: rgb(148, 220, 85);
        text-align: center;
        line-height: 30px;
      }

      .days {
        height: 90px;
        line-height: 90px;
        font-size: 50px;
        text-align: center;
        font-weight: 800;
        border-bottom: 1px solid #ccc;
      }

      .date {
        font-size: 14px;
        text-align: center;
        height: 26px;
        line-height: 26px;
      }
    }
  }
}
</style>
